import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { ThemeCoverWrapper } from './style'
import { getImageSize } from '@/utils/HandlerImg'
import { getCount } from '@/utils/HandlerCount'
import { useNavigate } from 'react-router-dom'
import type { NotificationArgsProps } from 'antd'
import { notification } from 'antd'

interface IProps {
  children?: ReactNode
  info: {
    id: number
    picUrl?: string
    coverImgUrl?: string
    playCount: number
    name: string
    creator: { nickname: string }
  }
  right?: number
}

const SongsItem: React.FC<IProps> = (props) => {
  const { info, right } = props
  const navigate = useNavigate()

  type NotificationPlacement = NotificationArgsProps['placement']
  const [api, contextHolder] = notification.useNotification()
  const openNotification = (placement: NotificationPlacement) => {
    api.info({
      message: `歌单名称：${info.name}`,
      description: '功能开发中',
      placement
    })
  }

  const goToSongsDetail = (id: number) => {
    navigate(`/discover/songs/detail?id=${id}`)
    // window.open(`https://music.163.com/playlist?id=${id}`, '_blank')
    openNotification('topRight')
  }

  return (
    <ThemeCoverWrapper right={right}>
      {contextHolder}
      <div className="cover-top" onClick={() => goToSongsDetail(info.id)}>
        <img
          src={getImageSize(info.picUrl ?? info.coverImgUrl ?? '', 140)}
          alt=""
        />
        <div className="cover sprite_covor">
          <div className="info sprite_covor">
            <span>
              <i className="sprite_icon erji"></i>
              {getCount(info.playCount)}
            </span>
            <i className="sprite_icon play"></i>
          </div>
        </div>
      </div>
      <div className="cover-bottom text-nowrap" title={info.name}>
        {info.name}
      </div>
      <div className="cover-source">
        <span>by</span>
        <span className="artist">{info.creator.nickname}</span>
      </div>
    </ThemeCoverWrapper>
  )
}

export default memo(SongsItem)
